<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en" />
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
	
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
    <title>图片社交网站</title>
	<link href="./assets/css/register.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
    <!--script src="./assets/js/require.min.js"></script-->
    

    <link href="./assets/css/c.css" rel="stylesheet"  type="text/css"/>
	
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
    <!--script src="./assets/js/dashboard.js"></script-->
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/charts-c3/plugin.js"></script-->
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
    <script src="./assets/plugins/maps-google/plugin.js"></script>
    <!-- Input Mask Plugin -->
    <!--script src="./assets/plugins/input-mask/plugin.js"></script-->
</head>
<body class="">
    <div class="page">
        <div class="page-main">
            <div class="header py-4">
                <div class="container">
                    <div class="d-flex">
                        <a class="header-brand yz" href="./index">
                            <img src="./p/brand.png" class="header-brand-img">图片社交网站
                         </a>
                        <div class="d-flex order-lg-2 ml-auto user-div">
                            <a href="#" class="nav-link pr-0 leading-none user-a" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
                                <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
                                <span class="ml-2 d-none d-lg-block">
                                     <span class="text-default">未登录</span>
                                     <small class="text-muted d-block mt-1">点击登录</small>
                                </span>
                            </a>
                        </div>
                    
                    </div>
                </div>
            </div>
            <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
                <div class="container">
                    <div class="row align-items-center">

                        <div class="col-lg order-lg-first">
                            <ul class="nav nav-tabs border-0 flex-column flex-lg-row"> <!-- 导航栏 -->
                                <li class="nav-item">
                                    <a href="./index" class="nav-link active"><i class="fe fe-home"></i> 主页</a>
                                </li>
                                <li class="nav-item">
                                    <a href="./latest" class="nav-link"><i class="fe fe-arrow-up-circle"></i> 最新</a>
                                </li>
                                <li class="nav-item">
                                    <a href="./trend" class="nav-link"><i class="fe fe-thumbs-up"></i> 人气</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
			<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="row">
			      <div class="col col-login mx-auto bcw">
			        <div class="text-center mb-6">
			          <img src="./assets/brand/tabler.svg" class="h-6" alt="">
			        </div>
					<div class="register-tab" style="width:100%;display:table;background-color:#fff;border:1px solid rgba(0, 40, 100, 0.12);border-radius:3px;padding-left: 16px;padding-right:16px;">
						<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#login-content" tabindex="-1" data-toggle="tab">登录</a></div>
						<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#register-content" tabindex="-1" data-toggle="tab">注册</a></div>
						<div style="padding: 16px;float:right;display:table-cell;">
						    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
						</div>
					</div>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active" id="login-content">
						<form class="card" action="" method="post">
						  <div class="card-body p-6">
							
						    <div class="card-title">登录</div>
							
						    <div class="form-group">
						      <label class="form-label">用户名</label>
						      <input type="text" class="form-control" id="login_username" aria-describedby="emailHelp" placeholder="account">
						    </div>
						    <div class="form-group">
						      <label class="form-label">
						        密码
						        <a href="./forgot-password.html" class="float-right small">忘记密码</a>
						      </label>
						      <input type="password" class="form-control" id="login_password" placeholder="Password">
						    </div>
						    <div class="form-group">
						      <label class="custom-control custom-checkbox">
						        <input type="checkbox" class="custom-control-input" />
						        <span class="custom-control-label">记住账号</span>
						      </label>
						    </div>
						    <div class="form-footer">
						      <button type="button" class="btn btn-primary btn-block" onclick="login()">登录</button>
						    </div>
						  </div>
						</form>
						</div>
						<div class="tab-pane fade in" id="register-content">
							<form class="card" id="registerform">
							  <div class="card-body p-6">
							    <div class="card-title">创建新账户</div>
							    <div class="form-group">
							      <label class="form-label">用户名</label>
							      <input type="text" class="form-control" id="user_name" placeholder="用户名">
							    </div>
								
								<div class="form-group">
								  <label class="form-label">邮箱</label>
								  <input type="email" class="form-control" id="email" placeholder="邮箱">
								</div>
							
							    <div class="form-group">
							      <label class="form-label">密码</label>
							      <input type="password" class="form-control" id="input_password" placeholder="密码">
							    </div>
								
								<div class="form-group">
								  <label class="form-label">确认密码</label>
								  <input type="password" class="form-control" id="comfirm_password" placeholder="确认密码">
								</div>
					
							    <div class="form-footer">
							      <button class="btn btn-primary btn-block" type="button" onclick="register();">创建</button>
							    </div>
							  </div>
							</form>
						</div>
			        </div>
			      </div>
			    </div>
			</div>
            <div class="my-3 my-md-5">
                <div class="container">
                    <div class="page-header">
                        <h1 class="page-title">
                            推荐
                        </h1>

                    </div>
                    <div class="row row-cards" id="recommend">
                        
                    </div>

                    <div class="page-header">
                        <h1 class="page-title">
                            最新
                        </h1>
                        <h1 class="mo">
                            <a href="latest">MORE+</a>
                        </h1>
                    </div>
                    <div class="row row-cards" id="latest">
                    
                    </div>

                    <div class="page-header">
                        <h1 class="page-title">
                            热门
                        </h1>
                        <h1 class="mo">
                            <a href="trend">MORE+</a>
                        </h1>
                    </div>
					
                    <div class="row row-cards" id="trend">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 mt-4 mt-lg-0">
                        其它类似网站<br>Similar Websites
                    </div>
                    <div class="col-lg-8">
                        <div class="row">
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="https://huaban.com/discovery/">花瓣网</a></li>
                                    <li><a href="https://tuchong.com/">图虫</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="https://www.mihuashi.com/artworks">米画师</a></li>
                                    <li><a href="https://bcy.net/illust/toppost100">半次元</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="http://www.lofter.com/">Lofter</a></li>
                                    <li><a href="https://pixabay.com/">pixabay</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="http://artand.cn/works">Artand</a></li>
                                    <li><a href="http://www.poco.cn/works/works_list?classify_type=0&works_type=editor">POCO</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                <div class="row align-items-center flex-row-reverse">
                    <div class="col-auto ml-lg-auto">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <ul class="list-inline list-inline-dots mb-0">
                                    <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
                                    <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
                                </ul>
                            </div>
                            <div class="col-auto">
                                <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
                        一个以图片为主要内容的社交网站  By Group 4.
                    </div>
                </div>
    </div>
        </footer>
    </div>
	<script type="text/template" id="user-info">
		<div class="d-flex order-lg-2 ml-auto user-info">

		   <div class="dropdown">
		       <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"><!-- 账户信息 -->
		           <span class="avatar" style="background-image: url(./p/faces/lh.jpg)" id="userimg"></span>
		       <span class="ml-2 d-none d-lg-block">
		         <span class="text-default" id="username">李华</span>
		         <small class="text-muted d-block mt-1" id="UID">Administrator</small>
		       </span>
		       </a>
		       <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <!-- 下拉框 -->
		           <a class="dropdown-item" href="profile" target="_self">
		               <i class="dropdown-icon fe fe-user"></i> 个人信息
		           </a>
		           <a class="dropdown-item" href="follow" target="_self">
		               <i class="dropdown-icon fe fe-star"></i> 我的关注
		           </a>
		           <a class="dropdown-item" href="like" target="_self">
		               <i class="dropdown-icon fe fe-thumbs-up"></i> 点赞记录
		           </a>
		           <a class="dropdown-item" href="upload" target="_blank">
		               <i class="dropdown-icon fe fe-upload"></i> 图片上传
		           </a>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-settings"></i> 设置
		           </a>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-send"></i> 消息
		           </a>
		           <div class="dropdown-divider"></div>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-help-circle"></i> 帮助
		           </a>
		           <a class="dropdown-item" onclick="logout();">
		               <i class="dropdown-icon fe fe-log-out"></i> 退出
		           </a>
		       </div>
		   </div>
		</div>
	</script>
	<script type="text/template" id="no-user">
		<a href="#" class="nav-link pr-0 leading-none user-a" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
		    <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
		    <span class="ml-2 d-none d-lg-block">
		         <span class="text-default">未登录</span>
		         <small class="text-muted d-block mt-1">点击登录</small>
		    </span>
		</a>
	</script>
	<script type="text/template" id="header-pic">
		<div class="col-sm-6 col-lg-3">
		    <div class="card p-3">
			    <div class="mb-3 div-img" style="overflow:hidden;height:200px">
					<a href="javascript:void(0)" target="_blank" class="a-img">
						<img class="header-pic-img" alt="Photo by Nathan Guerrero" class="rounded">
					</a>
				</div>
		        <div class="d-flex align-items-center px-2">
					<a class="a-author" target="_blank">
		                <div class="avatar avatar-md mr-3 author-img" style="background-image: url(p/faces/male/41.jpg)"></div>
					</a>
		            <div>
						<a class="a-author" target="_blank">
		                    <div class="author-name">Nathan G</div>
						</a>
		                <small class="d-block text-muted upload-time">12 天前</small>
		            </div>
		            <div class="ml-auto text-muted">
		                <a class="icon d-none d-md-inline-block ml-3 favor" onclick="like(this);"><i class="fe fe-heart mr-1"></i> <span class="favor-num">90</span></a>
		            </div>
		        </div>
		    </div>
		</div>
	</script>
    <script type="text/javascript">
		isLogin();
		initHeaderPic();
				
		function isLogin()
		{
			$.ajax({
				method: "GET",
				url: "/islogin",
				dataType: "json",
				contentType: "application/json",
			}).done(function(result) {	
				console.log(result);
			    if(result.status === "0")
				{
					let userinfo = document.getElementById('user-info');
					let user = $($(userinfo).html());
					var nouser = $('.user-a');
					nouser.remove();
					var parent = $('.user-div');
					let user_name = user.find('#username');
					let user_id = user.find('#UID');
					let user_img = user.find('#userimg');
					user_name.text(result.user_name);
					user_id.text(result.user_id);
					user_img.css("background-image","url(" + result.user_img + ")");
					parent.append(user);
				}
			}).fail(function(result) {
			    alert("获取图片失败，请刷新网站");
				});
			}
		function initHeaderPic(){	
			var imgs;
			$.ajax({
						method: "GET",
						url: "/api/recommendIndex",
						dataType: "json",
						contentType: "application/json",
					}).done(function(result) {	
						    console.log(result);
						    initRecommendPics(result);
					}).fail(function(result) {
			              alert("获取图片失败，请刷新网站");
					});
		    $.ajax({
		    			method: "GET",
		    			url: "/api/RecentTweetIndex",
		    			dataType: "json",
		    			contentType: "application/json",
		    		}).done(function(result) {	
		    				console.log(result);
		    				initLatestPics(result);
		    		}).fail(function(result) {
		                  alert("获取图片失败，请刷新网站");
		    		});
		    $.ajax({
		    			method: "GET",
		    			url: "/api/HotTweetIndex",
		    			dataType: "json",
		    			contentType: "application/json",
		    		}).done(function(result) {	
		    				console.log(result);
		    				initTrendPics(result);
		    		}).fail(function(result) {
		                  alert("获取图片失败，请刷新网站");
		    		});
		}
		function initRecommendPics(imgs)
		{
			let org = document.getElementById('header-pic');
			for(let i = 0; i<imgs.length; i++)
			{
				var node = $(org.cloneNode(true)).html();
				var parent = $('#recommend')
				var pic = $(node);
				let img = pic.find('div a img.header-pic-img');
				
				let author_img = pic.find('.author-img');
				let author_name = pic.find('.author-name');
				let time = pic.find('.upload-time');
				let favor = pic.find('.favor-num');
				let a_favor = pic.find('.favor')
				let a_img = pic.find('.a-img');
				let a_author = pic.find('.a-author');
				
				img.attr('src',imgs[i]['imgaddr']);
				//height = img.height();
				//console.log(height);
				//img.css("top",-1*(parseFloat(height) - 200) + 'px');
				//console.log(author_img);
				//console.log(author_name);
				author_img.css('background-image','url(' + imgs[i]['userimg'] + ')');
				author_name.text(imgs[i]['username']);
				author_name.data('user_id',imgs[i]['user_id']);
				img.parent().data("img_id",imgs[i]['tweet_id']);
				//console.log(author_name.data("user_id"));
				//console.log(img.parent().data("img_id"));
				time.text(get_time_diff(parseInt(imgs[i]['time'])));
				favor.text(imgs[i]['favor']);
				a_favor.data('img_id',imgs[i]['tweet_id']);
				a_img.attr('href','./seepicinfo/' + imgs[i]['tweet_id']);
				a_author.attr('href','./seeauthorinfo/' + imgs[i]['user_id']);
				parent.prepend(pic);
			}
		}
		function initLatestPics(imgs)
		{
			let org = document.getElementById('header-pic');
			for(let i = 0; i<imgs.length; i++)
			{
				var node = $(org.cloneNode(true)).html();
				var parent = $('#latest')
				var pic = $(node);
				let img = pic.find('div a img.header-pic-img');
				
				let author_img = pic.find('.author-img');
				let author_name = pic.find('.author-name');
				let time = pic.find('.upload-time');
				let favor = pic.find('.favor-num');
				let a_favor = pic.find('.favor')
				let a_img = pic.find('.a-img');
				let a_author = pic.find('.a-author');
				img.attr('src',imgs[i]['imgaddr']);
				console.log(author_img);
				console.log(author_name);
				author_img.css('background-image','url(' + imgs[i]['userimg'] + ')');
				author_name.text(imgs[i]['username']);
				author_name.data('user_id',imgs[i]['user_id']);
				img.parent().data("img_id",imgs[i]['tweet_id']);
				//console.log(author_name.data("user_id"));
				//console.log(img.parent().data("img_id"));
				time.text(get_time_diff(parseInt(imgs[i]['time'])));
				favor.text(imgs[i]['favor']);
				a_favor.data('img_id',imgs[i]['tweet_id']);
				a_img.attr('href','./seepicinfo/' + imgs[i]['tweet_id']);
				a_author.attr('href','./seeauthorinfo/' + imgs[i]['user_id']);
				parent.prepend(pic);
			}
		}
		function initTrendPics(imgs)
		{
			let org = document.getElementById('header-pic');
			for(let i = 0; i<imgs.length; i++)
			{
				var node = $(org.cloneNode(true)).html();
				var parent = $('#trend')
				var pic = $(node);
				let img = pic.find('div a img.header-pic-img');
				let author_img = pic.find('.author-img');
				let author_name = pic.find('.author-name');
				let time = pic.find('.upload-time');
				let favor = pic.find('.favor-num');
				let a_favor = pic.find('.favor')
				let a_img = pic.find('.a-img');
				let a_author = pic.find('.a-author');
				img.attr('src',imgs[i]['imgaddr']);
				author_img.css('background-image','url(' + imgs[i]['userimg'] + ')');
				author_name.text(imgs[i]['username']);
				author_name.data('user_id',imgs[i]['user_id']);
				img.parent().data("img_id",imgs[i]['tweet_id']);
				//console.log(author_name);
				time.text(get_time_diff(parseInt(imgs[i]['time'])));
				//console.log(favor);
				favor.text(imgs[i]['favor']);
				a_favor.data('img_id',imgs[i]['tweet_id']);
				a_img.attr('href','./seepicinfo/' + imgs[i]['tweet_id']);
				a_author.attr('href','./seeauthorinfo/' + imgs[i]['user_id']);
				parent.prepend(pic);
			}
		}
		
		function like(el)
		{
			var el = $(el);
			let tweet_id = el.data("img_id");
			$.ajax({
						method: "GET",
						url: "/api/favor?"+'tweet_id=' + tweet_id,
						dataType: "json",
						contentType: "application/json",
					}).done(function(result) {	
						   if(result['status'] === 0)
						   {
							  let favor = el.find('.favor-num');
							  let num = favor.text();
							  num = parseInt(num) + 1;
							  //console.log(num);
							  favor.text(num);
						   }
						   else if(result['status'] === 3)
						   {
							  let favor = el.find('.favor-num');
							  let num = favor.text();
							  num = parseInt(num) - 1;
							  //console.log(num);
							  favor.text(num);
						   }
						   else
						   {
							   alert(result['info']);
						   }
					}).fail(function(result) {
			              alert("点赞失败，请刷新网站");
					});
		}
		function login(){
		    var parameters = {};
		    			
		    parameters["user_name"] = $('#login_username').val();
		    parameters["password"] = $('#login_password').val();
			//$('#LoginModal').modal('hide');
			//console.log($('#LoginModal'));
			var data= {
			    data: JSON.stringify(parameters),
			};
			$.ajax({
				method: "POST",
				url: "/login",
				dataType: "json",
				data: data,
				}).done(function(result) {
					console.log(result);
					console.log(result.status);
					if(result.status === '0')
					{
						console.log('login ok');
						$('#LoginModal').modal('hide');
						let userinfo = document.getElementById('user-info');
						let user = $($(userinfo).html());
						var nouser = $('.user-a');
						nouser.remove();
						var parent = $('.user-div');
						let user_name = user.find('#username');
						let user_id = user.find('#UID');
						let user_img = user.find('#userimg');
						user_img.css("background-image","url(" + result.user_img + ")");
						user_name.text($('#login_username').val());
						user_id.text(result.user_id);
						parent.append(user);	
					}
				}).fail(function(result) {
					alert("登录失败，请重试");
			});
		};
		function register()
		{
			var parameters = {};
						
			parameters["user_name"] = $('#user_name').val();
			parameters["email"] = $('#email').val();
			parameters["input_password"] = $('#input_password').val();
			parameters["comfirm_password"] = $('#comfirm_password').val();
			console.log(parameters);
			var data= {
	            data: JSON.stringify(parameters),
			};
			$.ajax({
				method: "POST",
				url: "/register",
				dataType: "json",
				data: data,
				}).done(function(result) {
					console.log(result);
					if(result.result === '0')
					{
						$('#LoginModal').modal('hide');
						let userinfo = document.getElementById('user-info');
						let user = $($(userinfo).html());
						var nouser = $('.user-a');
						nouser.remove();
						var parent = $('.user-div');
						let user_name = user.find('#username');
						let user_id = user.find('#UID');
						user_name.text($('#user_name').val());
						user_id.text(result.user_id);
						parent.append(user);	
					}
				}).fail(function(result) {
					alert("注册失败，请重试");
			});
	};
		function logout()
		{
			$.ajax({
				method: "POST",
				url: "/logout",
				dataType: "json",
				}).done(function(result) {
					console.log(result);
					if(result.status === '0')
					{
						let nouser = document.getElementById('no-user');
						let user = $($(nouser).html());
						console.log(user);
						var userinfo = $('.user-info');
						console.log(userinfo);
						userinfo.remove();
						var parent = $('.user-div');
						parent.append(user);
					}
				}).fail(function(result) {
					alert("登出失败，请重试");
			});
		}
		function get_time_diff(time) {
		    var diff = '';
		    var time_diff = Math.floor(new Date().getTime()/1000) - time;
		    // 计算相差天数  
		    var days = Math.floor(time_diff / (24 * 3600));
		    if (days > 0) {
		        diff += days + '天前';
				return diff;
		    }
		    // 计算相差小时数  
		    var leave1 = time_diff % ( 24 * 3600); 
		    var hours = Math.floor(leave1 / (3600));
		    if (hours > 0) {
		       return hours + '小时前';
		    } 
		    // 计算相差分钟数  
		    var leave2 =leave1 % (3600);
		    var minutes = Math.floor(leave2 / (60));
		    if (minutes > 0) {
		        return minutes + '分钟前';
		    }
		    // 计算相差秒数  
		    var leave3 = leave2%(60);
		    var seconds = Math.round(leave3);
		    if (seconds > 0) {
		       return seconds + '秒前';
		    } 
		    
		    return '刚刚';
		}
	</script>
</body>
</html>
